<template>
  <article>
      <h3>{{title}}</h3>
      <table class="moves_list">
          <thead>
              <tr>
                  <th>序号</th>
                  <th>电影名字</th>
                  <th>价格</th>
                  <th>上映时间</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for='item in moves' :key='item.id'>
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.price | filterPrice}}</td>
                  <td>{{item.time | filterTime}}</td>
              </tr>
          </tbody>
      </table>
  </article>
</template>

<script>
export default {
    name:'vArticle',
    data(){
        return{
            title:'青苹果电影系统',
            moves:[
                {
          id: 1,
          name: "姜子牙",
          price: 30.0,
          time: 1607928388132,
        },
        {
          id: 2,
          name: "我和我的祖国",
          price: 45.0,
          time: 1307928388132,
        },
        {
          id: 3,
          name: "我和我的家乡",
          price: 32.1,
          time: 1407928388132,
        },
            ]
        }
    }

}
</script>

<style scoped>
/* 内容 */
.main_contenter article {
  height: 300px;
  background-color: skyblue;
}
.main_contenter article h3{
 line-height: 60px;
}
/* 表格 */
.moves_list{
  width: 600px;
  margin: 0 auto;
  border-collapse: collapse;
}
.moves_list tr th,
.moves_list tr td{
    border: 1px solid #fff;
    padding: 10px 0;
}

</style>